<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'品德'}"></three-title>
        <!-- <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span> -->

    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">人品</p>
                 <div class="analyItemCon">
                     <!--  :indeterminate="isIndeterminate" -->
                     <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                     <!-- <div style="margin: 15px 0;"></div> -->
                     <!-- <el-checkbox-group v-model="renIds">
                        <el-checkbox v-for="(ren, index) in renList" :label="ren.two_key" :key="index" :data-title="ren.two_value"  @change="renChange($event)" >{{ren.two_key}}</el-checkbox>
                     </el-checkbox-group> -->
                     <!-- <div class="analyItemCon"> -->
                        <span class="provinceClass" v-for="(ren,index) in renList " :key="index">
                            <input name="twoType_name" type="checkbox" :value="ren.two_type" v-model="renIds"  :data-title="ren.two_value"  @change="renChange($event)" />{{ren.two_key}}
                        </span>
                    <!-- </div> -->
                     <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="fourClick(1)">
                    </div>
                </div>
            </div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">管品</p>
                 <div class="analyItemCon">
                     <!--  :indeterminate="isIndeterminate" -->
                    <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                     <!-- <div style="margin: 15px 0;"></div> -->
                     <!-- <el-checkbox-group>
                        <el-checkbox v-for="(guan, index) in guanList" :label="guan.two_type" :value="guan.two_type"  v-model="guanIds" :key="index"  :data-title="guan.two_value"  @change="guanChange($event)">{{guan.two_key}}</el-checkbox>
                     </el-checkbox-group> -->
                     <span class="provinceClass" v-for="(guan, endex) in guanList" :key="endex">
                            <input name="twoType_name" type="checkbox" :value="guan.two_type" v-model="guanIds"  :data-title="guan.two_value"  @change="guanChange($event)" />{{guan.two_key}}
                        </span>
                     <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="fourClick(2)">
                    </div>
                </div>
            </div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">思维</p>
                 <div class="analyItemCon">
                     <!-- :indeterminate="isIndeterminate"  -->
                     <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                     <!-- <div style="margin: 15px 0;"></div>
                     <el-checkbox-group >
                        <el-checkbox v-for="(si, index) in siList" :label="si.two_type" :value="si.two_type" :key="index" v-model="siIds" :data-title="si.two_value" @change="siChange($event)">{{si.two_key}}</el-checkbox>
                     </el-checkbox-group> -->
                     <span class="provinceClass" v-for="(si, ondex) in siList" :key="ondex">
                            <input name="twoType_name" type="checkbox" :value="si.two_type" v-model="siIds"  :data-title="si.two_value"  @change="siChange($event)" />{{si.two_key}}
                        </span>
                     <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="fourClick(3)">
                    </div>
                </div>
            </div>
            <!-- <div class="analyItem" >
                <p class="analyItemTit tx-center">备注</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">预留</span>
                    </p>
                </div>
            </div> -->
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon tx-center">
                <el-button type="primary" @click="updateStageInfoByleId()">提交</el-button>
                <!-- <p class="fl">
                    <span v-if="this.stageInfo.character_pin_type === undefined || this.stageInfo.character_pin_type === null || this.stageInfo.character_pin_type === ''" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p> -->
            </div>
        </div>
    </div>
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight" >
        <four-ren v-if="clickFourIndex === 1" :ordersatege="clickFourIndex"  :key="3"></four-ren>
        <four-guan v-if="clickFourIndex === 2" :ordersatege="clickFourIndex" :key="3"></four-guan>
        <four-si v-if="clickFourIndex === 3" :ordersatege="clickFourIndex" :key="3"></four-si>
    </transition-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCharacterList, updateStageInfoByleId } from '../../Resources/Api/index'
import fourRen from './fourInspect/fourRenInspect'
import fourGuan from './fourInspect/fourGuanInspect'
import fourSi from './fourInspect/fourSiInspect'
export default {
    components: {
        fourRen,
        fourGuan,
        fourSi
    },
    data () {
        return {
            // characterPinType: '',
            stageInfo: {},
            characterPinArr: [],
            clickFourIndex: 0,
            checkAll: '',
            siList: [],
            guanList: [],
            renList: [],
            renIds: [],
            guanIds: [],
            siIds: []
        }
    },

    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.getCharacterList()
        this.stageInfo = this.$route.query.stageInfo
        this.characterPinType = this.stageInfo.character_pin_type
        if (this.characterPinType.length > 0) {
            let characterPinArr = this.characterPinType.split(',')
            characterPinArr.forEach(characterPin => {
                let arr = characterPin.split('-')
                if (Number(arr[0]) === 1) {
                    this.renIds.push(arr[1])
                } else if (Number(arr[0]) === 2) {
                    this.guanIds.push(arr[1])
                } else if (Number(arr[0]) === 3) {
                    this.siIds.push(arr[1])
                }
            })
        }
    },
    methods: {
        updateStageInfoByleId () {
            let renIdsStr = ''
            let guanIdsStr = ''
            let siIdsStr = ''
            if (this.renIds.length > 0) {
                for (let i = 0; i < this.renIds.length; i++) {
                    if (i === (this.renIds.length - 1)) {
                        renIdsStr = renIdsStr + (1 + '-' + this.renIds[i])
                    } else {
                        renIdsStr = renIdsStr + (1 + '-' + this.renIds[i] + ',')
                    }
                }
            }
            if (this.guanIds.length > 0) {
                for (let i = 0; i < this.guanIds.length; i++) {
                    if (i === (this.guanIds.length - 1)) {
                        guanIdsStr = guanIdsStr + (2 + '-' + this.guanIds[i])
                    } else {
                        guanIdsStr = guanIdsStr + (2 + '-' + this.guanIds[i] + ',')
                    }
                }
            }
            if (this.siIds.length > 0) {
                for (let i = 0; i < this.siIds.length; i++) {
                    if (i === (this.siIds.length - 1)) {
                        siIdsStr = siIdsStr + (3 + '-' + this.siIds[i])
                    } else {
                        siIdsStr = siIdsStr + (3 + '-' + this.siIds[i] + ',')
                    }
                }
            }
            updateStageInfoByleId({
                uid: this.leftInfo.uid,
                characterPinType: renIdsStr + ',' + guanIdsStr + ',' + siIdsStr // 品德类型
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            })
        },
        renChange (event) {
            if (event.target.checked) {
                const constIndex = this.renIds.indexOf(Number(event.target.value))
                if (constIndex >= 0) {

                } else {
                    this.renIds.push(Number(event.target.value))
                }
            } else {
                if (this.renIds.length > 0) {
                    // 查询这个value是否在fuIds中出现
                    const currentIndex = this.renIds.indexOf(Number(event.target.value))
                    // 判断是否存在
                    if (currentIndex >= 0) {
                        // 如果出现，那么删除这个value值
                        this.renIds.splice(currentIndex, 1)
                    }
                }
            }
            console.log('this.renIds', this.renIds)
        },
        guanChange (event) {
            if (event.target.checked) {
                const constIndex = this.guanIds.indexOf(Number(event.target.value))
                if (constIndex >= 0) {

                } else {
                    this.guanIds.push(Number(event.target.value))
                }
            } else {
                if (this.guanIds.length > 0) {
                    // 查询这个value是否在fuIds中出现
                    const currentIndex = this.guanIds.indexOf(Number(event.target.value))
                    // 判断是否存在
                    if (currentIndex >= 0) {
                        // 如果出现，那么删除这个value值
                        this.guanIds.splice(currentIndex, 1)
                    }
                }
            }
            console.log('this.guanIds', this.guanIds)
        },
        siChange (event) {
            if (event.target.checked) {
                const constIndex = this.siIds.indexOf(Number(event.target.value))
                if (constIndex >= 0) {

                } else {
                    this.siIds.push(Number(event.target.value))
                }
            } else {
                if (this.siIds.length > 0) {
                    // 查询这个value是否在fuIds中出现
                    const currentIndex = this.siIds.indexOf(Number(event.target.value))
                    // 判断是否存在
                    if (currentIndex >= 0) {
                        // 如果出现，那么删除这个value值
                        this.siIds.splice(currentIndex, 1)
                    }
                }
            }
            console.log('this.siIds', this.siIds)
        },
        fourClick (value) {
            if (value) {
                this.clickFourIndex = Number(value)
            } else {
                this.clickFourIndex = 0
                this.getCharacterList()
            }
        },
        getCharacterList () {
            getCharacterList({
                // type: 2
            }).then(result => {
                // debugger
                if (Number(result.data.StatusCode) === 0) {
                    // debugger
                    result.data.Body.characters.forEach(character => {
                        if (Number(character.type) === 1) {
                            this.renList.push(character)
                        } else if (Number(character.type) === 2) {
                            this.guanList.push(character)
                        } else if (Number(character.type) === 3) {
                            this.siList.push(character)
                        }
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        },
        handleCheckAllChange () {

        },
        handleCheckedCitiesChange () {

        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
        }
    }
}
</script>
